import React from "react";
import { Project, User } from "./index";
import { Table } from "antd";
import { ColumnType } from "antd/lib/table";
import dayjs from "dayjs";
import { TableProps } from "antd/es";

interface List extends TableProps<Project> {
  users: User[];
}

type PropsType = Omit<List, "users">;

export const List = ({ users, ...props }: List) => {
  const column: ColumnType<any>[] = [
    {
      title: "名称",
      dataIndex: "name",
      sorter: (a, b) => a.name.localeCompare(b.name),
    },
    {
      title: "部门",
      dataIndex: "organization",
    },
    {
      title: "负责人",
      render(value, project) {
        return (
          <span>
            {users.find((user: User) => user.id === project.personId)?.name ||
              "未知"}
          </span>
        );
      },
    },
    {
      title: "创建时间",
      dataIndex: "created",
      render(value, project) {
        return (
          <span>
            {project.created
              ? dayjs(project.created).format("YYYY-MM-DD")
              : "无"}
          </span>
        );
      },
    },
  ];
  return <Table pagination={false} columns={column} {...props} />;
};
